<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>童话世界</title>
    <meta name="description" content="一个充满童话世界的地方，带你回味童年." />
    <meta name="keywords" content="皮卡丘、哆啦A梦、阿狸" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-default navbar-fixed-top clearfix">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javaScript:;">
                    <img src="images/logo.jpg" alt="Brand">
                </a>
            </div>
            <div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="javaScript:;">首页<span class="sr-only">(current)</span></a></li>
                    <li><a href="javaScript:;">皮卡丘</a></li>
                    <li><a href="javaScript:;">哆啦A梦</a></li>
                    <li><a href="javaScript:;">阿狸</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </div>
            <div class="nav navbar-nav navbar-right myloin">
                <a class="navbar-text navbar-link" href="javaScript:;">登录</a>
                <a class="navbar-text">|</a>
                <a class="navbar-text navbar-link" href="javaScript:;">注册</a>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div class="container">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: 50px;">
            <!-- 轮播标志小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- 图片 -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <a href="javaScript:;"><img src="images/哆啦A梦.jfif" alt="哆啦A梦"></a>
                    <div class="carousel-caption">
                        哆啦A梦
                    </div>
                </div>
                <div class="item">
                    <a href="javaScript:;"><img src="images/阿狸.jpg" alt="阿狸"></a>
                    <div class="carousel-caption">
                        阿狸
                    </div>
                </div>
                <div class="item">
                    <a href="javaScript:;"><img src="images/皮卡丘.jpg" alt="皮卡丘"></a>
                    <div class="carousel-caption">
                        皮卡丘
                    </div>
                </div>
            </div>

            <!-- 左右按钮 -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">上一张</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">下一张</span>
            </a>
        </div>
    </div>

    <!-- 主体内容 1-->
    <div class="container">
        <h3>剧情简介</h3>
        <div class="row">
            <div class="col-md-4 col-xs-12">
                <a href="javaScript:;">
                    <img class="img-responsive" src="images/main.jpg" alt="哆啦A梦">
                </a>
            </div>
            <div class="col-md-8 col-xs-12">
                <p style="margin-top: 60px;">大雄有一天打开自己的课桌，一只猫型机器人突然从抽屉里跳了出来，而这就是哆啦A梦。
                    它是由大雄的后代从22世纪里给送来的，目的是帮助大雄解决许多他暂时无法解决的问题，并且尽可能地满足大雄的愿望。</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-12 col-md-push-8">
                <a href="javaScript:;">
                    <img class="img-responsive" src="images/main2.jpg" alt="阿狸">
                </a>
            </div>
            <div class="col-md-8 col-xs-12 col-md-pull-4">
                <p style="margin-top: 60px;">
                    阿狸，国内当红原创动漫形象，性格可爱、温暖、孩子气，一直相信童话。于2006年由Hans创作，从网络与杂志连载开始，发行童话绘本和动画短片。迄今为止，阿狸的出版物突破300多万销量，在线上拥有千万注册粉丝。
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-12">
                <a href="javaScript:;">
                    <img class="img-responsive" src="images/main3.jpg" alt="皮卡丘">
                </a>
            </div>
            <div class="col-md-8 col-xs-12">
                <p style="margin-top: 60px;">脸颊两边有着小小的电力袋。遇到危险时就会放电。会将尾巴竖起来，去感觉周围是否安全。</p>
            </div>
        </div>
    </div>

    <!-- 主体内容 2-->
    <div class="container">
        <h3>作品评价</h3>
        <div class="row">
            <div class="col-sm-12 col-md-4">
                <div class="thumbnail">
                    <img src="images/foot.jpg" alt="哆啦A梦">
                    <div class="caption">
                        <h4 class="text-center">每次一看它，我就开心的像儿童</h4>
                        <p>大雄，我会保护你，但你也要学会慢慢长大。哆啦a梦走了，大雄学会了自己长大，我们每个人也学会了自己长大。
                        </p>
                        <p>
                            <a href="javaScript:;" class="btn btn-primary" role="button">了解详情</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                <div class="thumbnail">
                    <img src="images/foot2.png" alt="阿狸·尾巴">
                    <div class="caption">
                        <h4 class="text-center">疗伤治愈、温暖人心</h4>
                        <p>讲述了关于爱、梦想、成长和感动的梦幻童话。只有爱才是最终的归宿，触动了人们内心深处的柔软与坚强。
                        </p>
                        <p>
                            <a href="javaScript:;" class="btn btn-primary" role="button">了解详情</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                <div class="thumbnail">
                    <img src="images/foot3.jpg" alt="大侦探皮卡丘">
                    <div class="caption">
                        <h4 class="text-center">大侦探皮卡丘</h4>
                        <p>虽然故事没什么惊喜，但靠着可爱的皮卡丘，也能让人看得津津有味。片中的主要情节转折也给人很大惊喜，
                        </p>
                        <p>
                            <a href="javaScript:;" class="btn btn-primary" role="button">了解详情</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面尾部 -->
    <div class="container text-center">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="javaScript:;" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="active"><a href="javaScript:;">1</a></li>
                <li><a href="javaScript:;">2</a></li>
                <li><a href="javaScript:;">3</a></li>
                <li><a href="javaScript:;">4</a></li>
                <li><a href="javaScript:;">5</a></li>
                <li>
                    <a href="javaScript:;" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <div class="container">
        <hr>
        <p class="text-center">2020-forever</p>
    </div>
</body>

</html>